<!--
 * @Author: your name
 * @Date: 2021-12-01 15:56:45
 * @LastEditTime: 2021-12-12 01:42:19
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue-antd-admin-y\src\components\uploadImages\oneImage.vue
-->
<template>
  <div id="app">
    <div
      class="portraitShow"
      @mouseenter="moveImage(true)"
      @mouseleave="moveImage(false)"
    >
      <div
        class="setPortrait"
        @click="setPortrait()"
        v-show="!readerResult"
      ></div>
      <a-icon class="plus-icon" type="plus" v-show="!readerResult" />

      <input
        type="file"
        :id="`portrait-${idMoment}`"
        style="display: none"
        title=""
        @change="portraitChange"
      />
      <div class="portraitImage" v-show="readerResult">
        <img style="width: 100%; height: 100%" :src="readerResult" />
      </div>

      <div class="curtain" v-show="readerResult && showTool"></div>

      <div class="tool" v-show="readerResult && showTool">
        <a-icon
          type="eye"
          :style="{'font-size': '20px','margin-right':see?'0px':'10px'}"
          title="放大"
          v-on:click="visible = true"
        />
        <a-icon
         v-show="!see"
          title="删除"
          type="delete"
          style="font-size: 20px"
          v-on:click="deleteImage()"
        />
      </div>
    </div>

   <a-modal v-model="visible" :title="null" on-ok="handleOk" :footer="null" :bodyStyle="{
     padding:'10px'
   }">
      
      <img :src="readerResult" style="width:100%"/>
     
    </a-modal>
  </div>
</template>
<script>
import moment from 'moment'//导入文件
export default {
  name: "app",
  components: {},
  props: {
    imageUrl: String,
    idKey:String,      //多图时传入
    keyIndex:Number,   //多图时传入
    path:String,       //后台的图片路径
    see:Boolean,       //为true时只能看 false不能看 
  },
  data() {
    return {
      readerResult: "",
      fileData: new FormData(),
      idMoment: "" ,  //防止id出现重复
      showTool: false,
      visible:false,
    };
  },
  created() {
    // console.log(this.idKey)
    if(this.imageUrl){
      this.readerResult = this.imageUrl
      // this.$set(this,'readerResult',this.imageUrl)
    }
     this.idMoment = this.idKey?moment().format("X")+ this.idKey:moment().format("X")
  }, //生命周期 - 创建完成（可以访问当前this实例）
  mounted() {}, //生命周期 - 挂载完成（可以访问DOM元素）
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  watch: {},
  methods: {
    setPortrait() {
      let portrait = document.getElementById(`portrait-${this.idMoment}`);
      portrait.click();
    },
    moveImage(bool) {
      this.showTool = bool;
    },
    hideModal() {
    },
    deleteImage() {
     this.fileData.has("file")? this.fileData.set("file",""): this.fileData.append("file","")
      this.readerResult = "";
      let portrait = document.getElementById(`portrait-${this.idMoment}`);
      portrait.value = ""

       if(this.keyIndex != undefined){   
          this.$emit('del',this.keyIndex)  //多图时往回传送index
        }
    },
    portraitChange(e) {
      let file = e.target.files[0];
      const { uploading, $message,path } = this;
      let formData = path?uploading(file, "images","",path) :uploading(file, "images")
      

      if (formData) {
        this.fileData = formData;
        if(this.keyIndex != undefined){
           this.$emit('add',this.keyIndex)  //多图时往回传送index
        }
        if (window.FileReader) {
          var reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => {
            // $(".portraitImage:eq(0)").html(`<image  id="portraitImage" src="${reader.result}"></image>`);
            this.readerResult = reader.result;
            // console.log(this.readerResult);
          };
        } else {
          $message.error("当前浏览器不支持图片显示功能");
        }
        
      }
      // console.log(this.formData);
    },
    getFile() {
       return this.fileData;
    },
  },
};
</script>
<style lang="less" scoped>
.portraitImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  //   border: 1px solid red;
}

#portraitImage {
  //   width: 100%;
  //   height: 100%;
}

.portraitShow {
  width: 70%;
  height: 0;
  padding-bottom: 70%;
  border: 1px dashed #ced0d3;
  // margin-left: 20px;
  position: relative;
  margin: auto;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  .curtain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.7;
  }
  .tool {
    display: flex;
    position: absolute;
    left: 50%;
    transform: translate(calc(-50%), calc(-50%));
    top: 50%;
    color: white;
  }
  .setPortrait {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
}
.plus-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 20px;
  transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
</style>
